<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12_组件通信（子向父传值）</title>
    <!-- 引入Vue -->
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 编写div元素 -->
    <div id="app">
        {{content}}
        <!-- 标签中指定传递的数据 -->
        <son @send="handleSend"></son>
    </div>
    <!-- 编写Vue实例 -->
    <script>
        const vm = new Vue({
                // VM
                el: '#app',
                data: {
                    content: ''
                },
                components: {
                    // 局部组件名：组件对象
                    son: {
                        template: '<button @click="sendMsg">点我</button>',
                        methods: {
                            sendMsg() {
                                // 调用$emit，向父组件传递数据
                                this.$emit('send', "子组件->父组件")
                            }
                        }
                    }
                },
                methods: {
                    handleSend(m) {
                        this.content = m
                    }
                }
            })
            /*
            子向父传值的步骤

                    1.在子组件中绑定一个方法, 向父组件提交一个事件
                    2.在子组件标签中绑定一个方法, 监听事件
                    3.在父组件中编写处理程序
            */
    </script>
</body>

</html>